<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/Ax.css">
    <link rel="icon" type="image/x-ico" href="../ico/用户图标.ico" />
    <link href="https://fonts.googlefonts.cn/css?family=Hanalei+Fill" rel="stylesheet">
    <title>俺的个人信息咯</title>
</head>

<body>
    <!-- 头部 -->
    <header id="header" class="card">
        <img src="../image/头像.png" alt="看不见我" width="150">
        <h1>修电脑的坤坤</h1>
        <p>技术来源于生活，而高于生活</p>
    </header>

    <!-- 主体内容 (左侧) -->
    <main id="main">
        <!-- 欢迎语 -->
        <section id="welcome" class="card">
            <h2>欢迎来到我的网站</h2>
            <p>
                Hello,大家好哇,这里是杨轩啊,鄙人闲得无聊做了一个小小的网页,简单的HTML+CSS,当然了希望大家不喜勿喷,还有最重要的别搞我网站,谢谢 <br />
                <a href="#" class="text-center">点击了解更多</a>
            </p>
        </section>
        <!-- 最新通知 -->
        <section id="blog">
            <h2>最新通知</h2>
            <!-- 通知一 -->
            <article class="article">
                <h3>通知一</h3>
                <p id="bod">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem veniam adipisci necessitatibus quia quisquam? Eligendi vitae quia totam accusantium officiis!(我就不多说了，就用文本填充就好了)
                </p>
            </article>
            <!-- 通知二 -->
            <article class="article">
                <h3>通知二</h3>
                <p id="bod">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem veniam adipisci necessitatibus quia quisquam? Eligendi vitae quia totam accusantium officiis!
                </p>
                <hr/>
                <p>
                    <ul></ul>
                </p>
            </article>
        </section>
    </main>

    <!-- 侧边栏 (右侧) -->
    <sidebar id="sidebar" class="card">
        <h3>导航栏</h3>
        <!-- Navigation -->
        <nav>
            <p>
                <a href="./404.html" target="_blank">主页</a>
            </p>
            <p>
                <a href="about.html">关于我</a>
            </p>
            <p>
                <a href="contact.html">联系我</a>
            </p>
        </nav>
        <hr />
        <h3>联系我</h3>
        <p>
            <strong>地址:</strong> 宜宾职业技术学校
        </p>
        <p>
            <strong>电话:</strong> 13219511051
        </p>
        <p>
            <strong>邮箱:</strong> 2484601608@qq.com
        </p>
        <hr/>
        <h3>留言板</h3>
        <textarea></textarea>
        <button>发布</button>
    </sidebar>

    <div class="clr"></div>

    <!-- 底部 -->
    <footer id="footer">
        <p class="text-center">Copyright &copy; 杨轩-2022.9.19</p>
    </footer>

    <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="../audio/Maker.mp3">
    </audio>
    <script>
        //1、获取元素
        var txt = document.querySelector("textarea");
        var btn = document.querySelector("button");
        var ul = document.querySelector("ul");
        //2、给button绑定点击事件
        btn.onclick = function() {
            if (txt.value == "") { //当文本框中没有文字时，提示
                alert("您没有输入内容")
            } else {
                //创建元素li作为留言区
                var li = document.createElement("li");
                //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"
                txt.value = ""; //添加之后文本框的内容清空
                //将留言添加到ul中，而且在最上方
                ul.insertBefore(li, ul.children[0]);
                //当点击删除时删除ul中的li
                var as = document.querySelectorAll("a");
                //循环给每个删除绑定事件
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        //删除当前a标签所在位置的父节点li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>